Summary
মৌলিক ওয়েবসাইট তৈরি: HTML (HyperText Markup Language) এবং CSS (Cascading Style Sheets) ব্যবহার করে একটি সহজ ওয়েবসাইট তৈরি করা যায়। নিম্নে উপস্থাপন করা হলো:
-
HTML কোড: একটি HTML ফাইল তৈরি করুন, যেমন index.html। এতে একটি হেডার, নেভিগেশন, মূল বিষয়বস্তু (About, Services, Contact) এবং ফুটার থাকবে।
কোড উদাহরণ:
<!DOCTYPE html> <html lang="en"> <head> <title>My First Website</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header><h1>Welcome to My Website</h1></header> <main><section><h2>About Us</h2></section></main> <footer><p>© 2024 My First Website</p></footer> </body> </html> -
CSS কোড: CSS ফাইল তৈরি করুন, যেমন styles.css, যেখানে বিভিন্ন স্টাইলিং নিয়ম থাকবে।
কোড উদাহরণ:
body { font-family: Arial, sans-serif; margin: 0; } header { background: #4CAF50; color: white; } - কোড ব্যাখ্যা: HTML ফাইলের বিভিন্ন অংশ ও CSS ফাইলের স্টাইল সেটিংস ব্যাখ্যা করা হয়েছে।
- ওয়েবসাইট চালানো: index.html ফাইলটি ব্রাউজারে খুললে আপনার তৈরি করা ওয়েবসাইটটি দেখা যাবে।
- উন্নতকরণ: আরো ফিচার যেমন ইমেজ, উন্নত স্টাইলিং, এবং JavaScript যুক্ত করে ওয়েবসাইটটিকে উন্নত করতে পারবেন।
এইভাবে, HTML এবং CSS ব্যবহার করে একটি মৌলিক ওয়েবসাইট তৈরি করা সম্ভব এবং পরবর্তীতে সেটি আরও সমৃদ্ধ করা যেতে পারে।
HTML (HyperText Markup Language) এবং CSS (Cascading Style Sheets) ব্যবহার করে একটি মৌলিক ওয়েবসাইট তৈরি করা খুবই সহজ। নিচে একটি সহজ উদাহরণ দেওয়া হলো, যা দিয়ে আপনি একটি বেসিক ওয়েবসাইট তৈরি করতে পারবেন।
১. HTML কোড
প্রথমে, একটি HTML ফাইল তৈরি করুন। ধরুন, ফাইলটির নাম index.html।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>This is a simple website created using HTML and CSS.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>SEO Services</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: info@example.com</p>
</section>
</main>
<footer>
<p>© 2024 My First Website</p>
</footer>
</body>
</html>
২. CSS কোড
এখন, একটি CSS ফাইল তৈরি করুন। ধরুন, ফাইলটির নাম styles.css।
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: #4CAF50;
color: white;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin: 20px 0;
padding: 20px;
border: 1px solid #ccc;
}
footer {
text-align: center;
padding: 10px 0;
background: #f1f1f1;
position: relative;
bottom: 0;
width: 100%;
}
৩. কোড ব্যাখ্যা
HTML ফাইল:
<header>: হেডারের মধ্যে ওয়েবসাইটের শিরোনাম এবং নেভিগেশন বার রয়েছে।<main>: এখানে মূল বিষয়বস্তু রয়েছে, যেখানে বিভিন্ন সেকশন (About, Services, Contact) রয়েছে।<footer>: পৃষ্ঠার নীচে কপিরাইট তথ্য রয়েছে।
CSS ফাইল:
body: বডির ফন্ট, মার্জিন এবং প্যাডিং সেট করা হয়েছে।header: হেডারের ব্যাকগ্রাউন্ড এবং টেক্সট রঙ নির্ধারণ করা হয়েছে।nav: নেভিগেশন লিঙ্কগুলোর স্টাইলিং করা হয়েছে।mainওsection: মূল বিষয়বস্তু এবং সেকশনগুলোর প্যাডিং এবং মার্জিন নির্ধারণ করা হয়েছে।
৪. ওয়েবসাইট চালানো
এখন আপনি index.html ফাইলটি একটি ওয়েব ব্রাউজারে খুললে আপনার তৈরি করা ওয়েবসাইটটি দেখতে পাবেন। এটি একটি মৌলিক ওয়েবসাইট, কিন্তু এই উদাহরণটি দিয়ে আপনি HTML এবং CSS ব্যবহার করে কিভাবে একটি সাইট তৈরি করা যায়, তা বুঝতে পারবেন।
৫. উন্নতকরণ
- আপনি এই মৌলিক ওয়েবসাইটটিতে আরও ফিচার যুক্ত করতে পারেন, যেমন:
- ইমেজ যুক্ত করা।
- আরও স্টাইলিং এবং লেআউট পরিবর্তন।
- JavaScript ব্যবহার করে ইন্টারঅ্যাকটিভ ফিচার যোগ করা।
এইভাবে, HTML এবং CSS ব্যবহার করে একটি মৌলিক ওয়েবসাইট তৈরি করতে পারেন এবং ভবিষ্যতে এটি উন্নত করতে পারেন।
Read more
